//厦门大学计算机专业 | 前华为工程师
//专注《零基础学编程系列》  http://lblbc.cn/blog
//包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
//公众号：蓝不蓝编程
<template>
    <view class="page-wrapper">
        <view class="main-content">
            <view class="order-info">
                <view class="saler-row">
                    <view class="saler-info">
                        <view class="saler-name">蓝不蓝自营</view>
                        <image class="right-arrow" src="/static/images/right_arrow.png"></image>
                    </view>
                </view>
                <view class="goods-row" v-for="(item, index) in orderItem.list" :key="item.k">
                    <image class="goods-img" :src="item.squarePic" mode="aspectFit"></image>

                    <view class="goods-desc">
                        <view class="goods-name">{{ item.name }}</view>
                        <view class="price-row">
                            <view class="goods-price">￥{{ item.price / 100 }}</view>
                            <view>×{{ item.quantity }}</view>
                        </view>
                        <view class="tags">
                            <view class="seven-days">7天无理由退货</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="cost-info-rows">
                <view class="cost-info-row">
                    <view class="cost-info-left">商品金额</view>
                    <view class="cost-info-right">{{ costSum }}</view>
                </view>
                <view class="cost-info-row">
                    <view class="cost-info-left">总运费</view>
                    <view class="cost-info-right">满XX元 免邮</view>
                </view>
                <view class="cost-info-row">
                    <view class="cost-info-left">优惠券</view>
                    <view class="cost-info-right">无可用券</view>
                </view>
            </view>
        </view>

        <view class="bottom-wrapper">
            <view class="bottom-split"></view>
            <view class="btn-row">
                <view class="del-order" @tap="delOrder" :data-id="orderItem.orderId">删除订单</view>
            </view>
        </view>
    </view>
</template>

<script>
import { queryOrder, delOrder } from '@/common/api'
export default {
    data() {
        return {
            orderItem: {
                list: [],
                orderId: ''
            },
            costSum: 0
        };
    },
    onLoad: function (option) {
        this.queryData(option.id);
    },
    methods: {
        queryData(orderId) {
			queryOrder(orderId).then(resp => {
				this.orderItem = resp.data.data
				this.calcSum(resp.data.data.list)
			})
        },

        calcSum(orderList) {
            var sum = 0;

            if (orderList != null && typeof orderList != 'undefined') {
                orderList.forEach((elem, index) => {
                    sum += elem.quantity * elem.price;
                });
            }

            this.costSum = '￥' + sum / 100
        },
		delOrder(e) {
			let orderId = e.currentTarget.dataset['id'];
			delOrder(orderId).then(res => {
				if (!res.data.code) {
					uni.showToast({
						title: '已删除'
					});
					uni.navigateBack({
						delta: 0
					});
				}
			})
		}
	}
};
</script>
<style>
.page-wrapper {
    margin: 0;
    font-size: 28rpx;
    line-height: 1.5;
    color: #333;
    background-color: #f4f4f4;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    min-height: 2000rpx;
}

.main-content {
    display: flex;
    flex-direction: column;
    margin-bottom: 130rpx;
}

.order-info {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 20rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    padding: 20rpx;
}

.saler-row {
    display: flex;
    flex-direction: row;
}

.saler-info {
    flex: 1;
    display: flex;
    flex-direction: row;
}

.saler-name {
    color: #222222;
}

.right-arrow {
    height: 40rpx;
    width: 40rpx;
}

.status {
    color: #97999e;
}

.goods-row {
    display: flex;
    flex-direction: row;
    margin-top: 30rpx;
}

.goods-img {
    margin-left: 40rpx;
    width: 200rpx;
    height: 200rpx;
}

.goods-desc {
    display: flex;
    flex-direction: column;
    margin-left: 40rpx;
}

.goods-name {
    font-size: 35rpx;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.price-row {
    display: flex;
    flex-direction: row;
    margin-top: 10rpx;
}

.goods-price {
    color: #222222;
    flex: 1;
}

.tags {
    display: flex;
    flex-direction: row;
    margin-top: 10rpx;
}

.seven-days {
    color: #677da5;
    background-color: #eaf3ff;
    border-radius: 10rem;
    padding: 5rpx 10rpx;
}

.goods-info-split {
    margin-top: 20rpx;
    width: 100%;
    height: 1rpx;
    background-color: #dfdfdf;
}

.cost-info-rows {
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 40rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
}

.cost-info-row {
    display: flex;
    flex-direction: row;
    margin-top: 20rpx;
}

.cost-info-left {
    color: #595d65;
    flex: 1;
}

.cost-info-right {
    color: #222222;
}

.bottom-wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 20rpx;
    background-color: white;
}

.bottom-split {
    background-color: #dfdfdf;
    height: 2rpx;
    margin-bottom: 20rpx;
}

.goods-info-split {
    margin-top: 20rpx;
    width: 100%;
    height: 1rpx;
    background-color: #dfdfdf;
}

.btn-row {
    display: flex;
    flex-direction: row;
    margin-top: 20rpx;
    justify-content: flex-end;
}

.del-order {
    margin-right: 50rpx;
    border-radius: 10rem;
    padding: 5rpx 20rpx;
    color: #575e64;
    border: 1rpx solid #ebebeb;
}
</style>
